var module = [["音乐电台", "music"], ["stylish", "stylish"], ["google", "google"], ["关于", "about"]];
function GetId(elem){
    return document.getElementById(elem);
}


(function($){
    $.fn.reinitIframe = function(){
        if (!this[0]) {
            return null;
        }
        var dHeight = this[0].contentWindow.document.documentElement.scrollHeight;
        this[0].height =  dHeight;
    };
})( jQuery );

(function($) {
    $.organicTabs = function(el, options) {
        var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find(".nav");
        base.init = function() {
            base.options = $.extend({},$.organicTabs.defaultOptions, options);
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            }); 
            base.$nav.delegate("li > a", "click", function() {
                var curList = base.$el.find("a.current").attr("href").substring(1),
                    $newList = $(this),
                    listID = $newList.attr("href").substring(1),
                    $allListWrap = base.$el.find(".option-frame"),
                    curListHeight = $allListWrap.height(),
                    index = $("li > a").index(this);
                $allListWrap.height(curListHeight);
                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
                    clearInterval(curIframe);
                    curIframe = setInterval(function(){$("#" + listID + "-frm").reinitIframe()}, 200);
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
                        base.$el.find("#"+listID).fadeIn(base.options.speed);
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        });
                        base.$el.find(".nav li a").removeClass("current");
                        $newList.addClass("current");
                    });
                    localStorage.curIframe = index;
                }   
                return false;
            });
        };
        base.init();
    };
    $.organicTabs.defaultOptions = {
        "speed": 300
    };
    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };
})( jQuery );

function renderPage(){
    if (!localStorage.curIframe) {
        localStorage.curIframe = 0;
    }
    var nav = GetId('navigation'),
        frm = GetId('optionframe'),
        ul = document.createElement("ul"),
        navList = [],
        frmList = [],
        curFrmId;
    for (var i = 0; i < module.length; i++) {
        var frmName = module[i][0],
            frmId = module[i][1];
        var curFrm = '<iframe id="' + frmId + '-frm" src="module/' + frmId + '/index.html" scrolling="no" frameborder="0" width="100%";></iframe>';
        if (i == localStorage.curIframe) {
            curFrmId = frmId;
            navList += '<li><a href="#' + frmId + '" class="current">' + frmName + '</a></li>';
            frmList += '<div id="' + frmId + '" class="page">' + curFrm + '</div>';
        } else {
            navList += '<li><a href="#' + frmId + '">' + frmName + '</a></li>';
            frmList += '<div id="' + frmId + '" class="page" style="display:none;">' + curFrm + '</div>';
        }
    }
    ul.innerHTML = navList;
    ul.setAttribute("class", "nav");
    frm.innerHTML = frmList;
    nav.appendChild(ul);
    curIframe = setInterval(function(){$("#" + curFrmId + "-frm").reinitIframe()}, 200);
}

renderPage();


$("#content").organicTabs({"speed": 100});